<div id="hyper-subpage" class="container-fluid" style="float:left;">
	<h3 class="page-header"><svg data-src="svg/light_source.svg" width="28" height="28" fill="currentColor" class="svg4hyperhdr"></svg><span data-i18n="main_menu_leds_conf_token">LED Hardware</span></h3>
	<ul id="leds_cfg_nav" class="nav nav-tabs">
		<li class="nav-item"><button class="nav-link active" aria-selected="true" aria-current="menucontroller" href="#menu_controller" data-bs-toggle="tab" data-bs-target="#menu_controller" type="button" role="tab" data-i18n="conf_leds_nav_label_ledcontroller">LED Controller</button></li>
		<li class="nav-item"><button class="nav-link" aria-selected="false" href="#menu_gencfg" data-bs-toggle="tab" data-bs-target="#menu_gencfg" type="button" role="tab" data-i18n="conf_leds_nav_label_ledlayout">LED Layout</button></li>
	</ul>

	<div class="tab-content">
		<div id="menu_controller" class="tab-pane fade show active" style="padding-top: 10px;" aria-labelledby="menucontroller">
			<div class="row">
				<div class="col-lg-12" id="leddevice_intro"></div>
				<div class="col-md-12 col-xl-10 col-xxl-7">
					<div class="card card-default">
						<div class="card-header form-group" id="instTarget3">
							<div class="d-flex flex-row" id="instTarget1">
								<div class="d-inline-flex align-items-center p-2">
									<label for="leddevices" class="card-title" data-i18n="conf_leds_contr_label_contrtype">Controller type:</label>
								</div>
								<div class="d-flex p-2">
									<select id="leddevices" class="form-select" style="width: auto; margin-left: 10px; display: inline-block;"></select>
								</div>
							</div>
						</div>

						<div class="card-body">
							<div id="btn_wiz_holder"></div>
							<div id="ledDeviceOptions">
								<div id="editor_container"></div>
							</div>
						</div>
						<div class="card-footer" style="text-align: right;">
							<button id="btn_submit_controller" class="btn btn-primary"><svg data-src="svg/button_save.svg" fill="currentColor" class="svg4hyperhdr"></svg><span data-i18n="general_button_savesettings">Save Settings</span></button>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div id="menu_gencfg" class="tab-pane fade" style="padding-top: 10px;" aria-labelledby="menugencfg">
			<div class="row">
				<div class="col-lg-12" id="layout_intro"></div>
				<div class="col-lg-6 col-md-12" id="led_main_panel">
					<div class="accordion" id="accordion">
						<div class="accordion-item">
							<div class="accordion-header card card-default" id="headingOne">
								<div class="card-header accordion-button" data-bs-toggle="collapse" data-bs-parent="#accordion" data-bs-target="#collapse1" aria-expanded="true" aria-controls="collapse1">
									<svg data-src="svg/light_source_frame_layout.svg" width="18" height="18" fill="currentColor" class="svg4hyperhdr"></svg><span data-i18n="conf_leds_layout_frame">Classic Layout (LED Frame)</span>
								</div>
							</div>
							<div id="collapse1" class="card accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordion">
								<div class="card-body">
									<div class="container">
										<div>
											<div class="row form-group">
												<div class="col-3 col-form-label mb-3">
													<label class="ltdlabel" for="ip_cl_top" data-i18n="conf_leds_layout_cl_top">Top</label>
												</div>
												<div class="col-9">
													<div class="input-group">
														<input class="form-control ledCLconstr" id="ip_cl_top" type="number" value="1" min="0" step="1" />
														<div class="input-group-append">
															<span data-i18n="edt_append_leds" class="input-group-text">LEDs</span>
														</div>
														<div class="input-group-append">
															<button type="button" class="btn btn-secondary stepper-down">-</button>
														</div>
														<div class="input-group-append">
															<button type="button" class="btn btn-secondary stepper-up">+</button>
														</div>
													</div>
												</div>
											</div>
											<div class="row form-group">
												<div class="col-3 col-form-label mb-3">
													<label class="ltdlabel" for="ip_cl_bottom" data-i18n="conf_leds_layout_cl_bottom">Bottom</label>
												</div>
												<div class="col-9">
													<div class="input-group">
														<input class="form-control ledCLconstr" id="ip_cl_bottom" type="number" value="0" min="0" step="1" />
														<div class="input-group-append">
															<span data-i18n="edt_append_leds" class="input-group-text">LEDs</span>
														</div>
														<div class="input-group-append">
															<button type="button" class="btn btn-secondary stepper-down">-</button>
														</div>
														<div class="input-group-append">
															<button type="button" class="btn btn-secondary stepper-up">+</button>
														</div>
													</div>
												</div>
											</div>
											<div class="row form-group">
												<div class="col-3 col-form-label mb-3">
													<label class="ltdlabel" for="ip_cl_left" data-i18n="conf_leds_layout_cl_left">Left</label>
												</div>
												<div class="col-9">
													<div class="input-group">
														<input class="form-control ledCLconstr" id="ip_cl_left" type="number" value="0" min="0" step="1" />
														<div class="input-group-append">
															<span data-i18n="edt_append_leds" class="input-group-text">LEDs</span>
														</div>
														<div class="input-group-append">
															<button type="button" class="btn btn-secondary stepper-down">-</button>
														</div>
														<div class="input-group-append">
															<button type="button" class="btn btn-secondary stepper-up">+</button>
														</div>
													</div>
												</div>
											</div>
											<div class="row form-group">
												<div class="col-3 col-form-label mb-3">
													<label class="ltdlabel" for="ip_cl_right" data-i18n="conf_leds_layout_cl_right">Right</label>
												</div>
												<div class="col-9">
													<div class="input-group">
														<input class="form-control ledCLconstr" id="ip_cl_right" type="number" value="0" min="0" step="1" />
														<div class="input-group-append">
															<span data-i18n="edt_append_leds" class="input-group-text">LEDs</span>
														</div>
														<div class="input-group-append">
															<button type="button" class="btn btn-secondary stepper-down">-</button>
														</div>
														<div class="input-group-append">
															<button type="button" class="btn btn-secondary stepper-up">+</button>
														</div>
													</div>
												</div>
											</div>
											<div class="row form-group">
												<div class="col-3 col-form-label mb-3">
													<label class="ltdlabel" for="ip_cl_glength" data-i18n="conf_leds_layout_cl_gaglength">Gap length</label>
												</div>
												<div class="col-9">
													<div class="input-group">
														<input class="form-control ledCLconstr" id="ip_cl_glength" type="number" value="0" min="0" step="1" />
														<div class="input-group-append">
															<span data-i18n="edt_append_leds" class="input-group-text">LEDs</span>
														</div>
														<div class="input-group-append">
															<button type="button" class="btn btn-secondary stepper-down">-</button>
														</div>
														<div class="input-group-append">
															<button type="button" class="btn btn-secondary stepper-up">+</button>
														</div>														
													</div>
												</div>
											</div>
											<div class="row form-group">
												<div class="col-3 col-form-label mb-3">
													<label class="ltdlabel" for="ip_cl_gpos" data-i18n="conf_leds_layout_cl_gappos">Gap position</label>
												</div>
												<div class="col-9">
													<div class="input-group">
														<input class="form-control ledCLconstr" id="ip_cl_gpos" type="number" value="0" min="0" step="1" />
														<div class="input-group-append">
															<button type="button" class="btn btn-secondary stepper-down">-</button>
														</div>
														<div class="input-group-append">
															<button type="button" class="btn btn-secondary stepper-up">+</button>
														</div>	
													</div>
												</div>
											</div>
											<div class="row form-group">
												<div class="col-3 col-form-label mb-3">
													<label class="ltdlabel" for="ip_cl_position" data-i18n="conf_leds_layout_cl_inppos">Input position</label>
												</div>
												<div class="col-9">
													<div class="input-group">
														<input class="form-control ledCLconstr" id="ip_cl_position" type="number" value="0" min="0" step="1" />
														<div class="input-group-append">
															<button type="button" class="btn btn-secondary stepper-down">-</button>
														</div>
														<div class="input-group-append">
															<button type="button" class="btn btn-secondary stepper-up">+</button>
														</div>	
													</div>
												</div>
											</div>
											<div class="row form-group">
												<div class="col-3 col-form-label mb-3">
													<label class="ltdlabel" for="ip_cl_groupX" data-i18n="conf_leds_layout_cl_groupX">Group horiz.</label>
												</div>
												<div class="col-9">
													<div class="input-group">
														<input class="form-control ledCLconstr" id="ip_cl_groupX" type="number" value="0" min="0" step="1" />
														<div class="input-group-append">
															<button type="button" class="btn btn-secondary stepper-down">-</button>
														</div>
														<div class="input-group-append">
															<button type="button" class="btn btn-secondary stepper-up">+</button>
														</div>	
													</div>
												</div>
											</div>
											<div class="row form-group">
												<div class="col-3 col-form-label mb-3">
													<label class="ltdlabel" for="ip_cl_groupY" data-i18n="conf_leds_layout_cl_groupY">Group verti.</label>
												</div>
												<div class="col-9">
													<div class="input-group">
														<input class="form-control ledCLconstr" id="ip_cl_groupY" type="number" value="0" min="0" step="1" />
														<div class="input-group-append">
															<button type="button" class="btn btn-secondary stepper-down">-</button>
														</div>
														<div class="input-group-append">
															<button type="button" class="btn btn-secondary stepper-up">+</button>
														</div>	
													</div>
												</div>
											</div>
											<div class="row form-group">
												<div class="col-3 col-form-label mb-3">
													<label class="ltdlabel" for="ip_cl_reverse" data-i18n="conf_leds_layout_cl_reversdir">Reverse direction</label>
												</div>
												<div class="col-9">
													<div class="input-group">
														<input class="ledCLconstr form-check-input" id="ip_cl_reverse" type="checkbox" value="false" />														
													</div>
												</div>
											</div>
										</div>
									</div>
									<div class="card card-default">
										<div class="card-header headcollapse" data-bs-toggle="collapse" data-bs-target="#collapse3">
											<h4 class="card-title">
												<a><span data-i18n="conf_leds_layout_advanced">Advanced settings</span></a>
											</h4>
										</div>
										<div id="collapse3" class="accordion-collapse collapse">
											<div class="card-body">
												<div class="container">
													<div>
														<div class="row form-group">
															<div class="col-4 col-form-label mb-3">
																<label class="ltdlabel" for="ip_cl_hdepth" data-i18n="conf_leds_layout_cl_hleddepth">Horizontal LED depth</label>
															</div>
															<div class="col-8">
																<div class="input-group">
																	<input class="form-control ledCLconstr" id="ip_cl_hdepth" type="number" value="8" min="1" max="100" step="1" />
																	<div class="input-group-append">
																		<span data-i18n="edt_append_percent" class="input-group-text">%</span>
																	</div>
																	<div class="input-group-append">
																		<button type="button" class="btn btn-secondary stepper-down">-</button>
																	</div>
																	<div class="input-group-append">
																		<button type="button" class="btn btn-secondary stepper-up">+</button>
																	</div>
																</div>
															</div>
														</div>
														<div class="row form-group">
															<div class="col-4 col-form-label mb-3">
																<label class="ltdlabel" for="ip_cl_vdepth" data-i18n="conf_leds_layout_cl_vleddepth">Vertical LED depth</label>
															</div>
															<div class="col-8">
																<div class="input-group">
																	<input class="form-control ledCLconstr" id="ip_cl_vdepth" type="number" value="5" min="1" max="100" step="1" />
																	<div class="input-group-append">
																		<span data-i18n="edt_append_percent" class="input-group-text">%</span>
																	</div>
																	<div class="input-group-append">
																		<button type="button" class="btn btn-secondary stepper-down">-</button>
																	</div>
																	<div class="input-group-append">
																		<button type="button" class="btn btn-secondary stepper-up">+</button>
																	</div>
																</div>
															</div>
														</div>
														<div class="row form-group">
															<div class="col-4 col-form-label mb-3">
																<label class="ltdlabel" for="ip_cl_overlap" data-i18n="conf_leds_layout_cl_overlap">Edge Gap</label>
															</div>
															<div class="col-8">
																<div class="input-group">
																	<input class="form-control ledCLconstr" id="ip_cl_overlap" type="number" value="0" min="0" max="200" step="1" />
																	<div class="input-group-append">
																		<span data-i18n="edt_append_percent" class="input-group-text">%</span>
																	</div>
																	<div class="input-group-append">
																		<button type="button" class="btn btn-secondary stepper-down">-</button>
																	</div>
																	<div class="input-group-append">
																		<button type="button" class="btn btn-secondary stepper-up">+</button>
																	</div>
																</div>
															</div>
														</div>
														<div class="row form-group">
															<div class="col-4 col-form-label mb-3">
																<label class="ltdlabel" for="ip_cl_edgegap" data-i18n="conf_leds_layout_cl_edgegap">Edge Gap</label>
															</div>
															<div class="col-8">
																<div class="input-group">
																	<input class="form-control ledCLconstr" id="ip_cl_edgegap" type="number" value="0" min="0" max="50" step="1" />
																	<div class="input-group-append">
																		<span data-i18n="edt_append_percent" class="input-group-text">%</span>
																	</div>
																	<div class="input-group-append">
																		<button type="button" class="btn btn-secondary stepper-down">-</button>
																	</div>
																	<div class="input-group-append">
																		<button type="button" class="btn btn-secondary stepper-up">+</button>
																	</div>
																</div>
															</div>
														</div>
														<div class="row form-group">
															<div class="col-4 col-form-label mb-3">
																<label class="ltdlabel" for="ip_cl_ptlh" data-i18n="conf_leds_layout_ptl">Point Top Left</label>
															</div>
															<div class="col-8">
																<div class="input-group">
																	<input class="form-control ledCLconstr" id="ip_cl_ptlh" type="number" value="0" min="0" max="100" step="1" />
																	<div class="input-group-append">
																		<span data-i18n="edt_append_percent_h" class="input-group-text">%h</span>
																	</div>
																	<div class="input-group-append">
																		<button type="button" class="btn btn-secondary stepper-down">-</button>
																	</div>
																	<div class="input-group-append">
																		<button type="button" class="btn btn-secondary stepper-up">+</button>
																	</div>
																</div>
															</div>
														</div>
														<div class="row form-group">
															<div class="col-4 col-form-label mb-3">
															</div>
															<div class="col-8 mb-3">
																<div class="input-group">
																	<input class="form-control ledCLconstr" id="ip_cl_ptlv" type="number" value="0" min="0" max="100" step="1" />
																	<div class="input-group-append">
																		<span data-i18n="edt_append_percent_v" class="input-group-text">%v</span>
																	</div>
																	<div class="input-group-append">
																		<button type="button" class="btn btn-secondary stepper-down">-</button>
																	</div>
																	<div class="input-group-append">
																		<button type="button" class="btn btn-secondary stepper-up">+</button>
																	</div>
																</div>
															</div>
														</div>
														<div class="row form-group">
															<div class="col-4 col-form-label mb-3">
																<label class="ltdlabel" for="ip_cl_ptrh" data-i18n="conf_leds_layout_ptr">Point Top Right</label>
															</div>
															<div class="col-8">
																<div class="input-group">
																	<input class="form-control ledCLconstr" id="ip_cl_ptrh" type="number" value="100" min="0" max="100" step="1" />
																	<div class="input-group-append">
																		<span data-i18n="edt_append_percent_h" class="input-group-text">%h</span>
																	</div>
																	<div class="input-group-append">
																		<button type="button" class="btn btn-secondary stepper-down">-</button>
																	</div>
																	<div class="input-group-append">
																		<button type="button" class="btn btn-secondary stepper-up">+</button>
																	</div>
																</div>
															</div>
														</div>
														<div class="row form-group">
															<div class="col-4 col-form-label mb-3">
															</div>
															<div class="col-8 mb-3">
																<div class="input-group">
																	<input class="form-control ledCLconstr" id="ip_cl_ptrv" type="number" value="0" min="0" max="100" step="1" />
																	<div class="input-group-append">
																		<span data-i18n="edt_append_percent_v" class="input-group-text">%v</span>
																	</div>
																	<div class="input-group-append">
																		<button type="button" class="btn btn-secondary stepper-down">-</button>
																	</div>
																	<div class="input-group-append">
																		<button type="button" class="btn btn-secondary stepper-up">+</button>
																	</div>
																</div>
															</div>
														</div>
														<div class="row form-group">
															<div class="col-4 col-form-label mb-3">
																<label class="ltdlabel" for="ip_cl_pbrh" data-i18n="conf_leds_layout_pbr">Point Bottom Right</label>
															</div>
															<div class="col-8">
																<div class="input-group">
																	<input class="form-control ledCLconstr" id="ip_cl_pbrh" type="number" value="100" min="0" max="100" step="1" />
																	<div class="input-group-append">
																		<span data-i18n="edt_append_percent_h" class="input-group-text">%h</span>
																	</div>
																	<div class="input-group-append">
																		<button type="button" class="btn btn-secondary stepper-down">-</button>
																	</div>
																	<div class="input-group-append">
																		<button type="button" class="btn btn-secondary stepper-up">+</button>
																	</div>
																</div>
															</div>
														</div>
														<div class="row form-group">
															<div class="col-4 col-form-label mb-3">															
															</div>
															<div class="col-8 mb-3">
																<div class="input-group">
																	<input class="form-control ledCLconstr" id="ip_cl_pbrv" type="number" value="100" min="0" max="100" step="1" />
																	<div class="input-group-append">
																		<span data-i18n="edt_append_percent_v" class="input-group-text">%v</span>
																	</div>
																	<div class="input-group-append">
																		<button type="button" class="btn btn-secondary stepper-down">-</button>
																	</div>
																	<div class="input-group-append">
																		<button type="button" class="btn btn-secondary stepper-up">+</button>
																	</div>
																</div>
															</div>
														</div>
														<div class="row form-group">
															<div class="col-4 col-form-label mb-3">
																<label class="ltdlabel" for="ip_cl_pblh" data-i18n="conf_leds_layout_pbl">Point Bottom Left</label>
															</div>
															<div class="col-8">
																<div class="input-group">
																	<input class="form-control ledCLconstr" id="ip_cl_pblh" type="number" value="0" min="0" max="100" step="1" />
																	<div class="input-group-append">
																		<span data-i18n="edt_append_percent_h" class="input-group-text">%h</span>
																	</div>
																	<div class="input-group-append">
																		<button type="button" class="btn btn-secondary stepper-down">-</button>
																	</div>
																	<div class="input-group-append">
																		<button type="button" class="btn btn-secondary stepper-up">+</button>
																	</div>
																</div>
															</div>
														</div>
														<div class="row form-group">
															<div class="col-4 col-form-label mb-3">
															</div>
															<div class="col-8 mb-3">
																<div class="input-group">
																	<input class="form-control ledCLconstr" id="ip_cl_pblv" type="number" value="100" min="0" max="100" step="1" />
																	<div class="input-group-append">
																		<span data-i18n="edt_append_percent_v" class="input-group-text">%v</span>
																	</div>
																	<div class="input-group-append">
																		<button type="button" class="btn btn-secondary stepper-down">-</button>
																	</div>
																	<div class="input-group-append">
																		<button type="button" class="btn btn-secondary stepper-up">+</button>
																	</div>
																</div>
															</div>
														</div>														
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
								<div class="card-footer" style="text-align: right;">
									<button id="btn_cl_save" class="btn btn-primary"><svg data-src="svg/button_save.svg" fill="currentColor" class="svg4hyperhdr"></svg><span data-i18n="conf_leds_layout_button_savelay">Save layout</span></button>
								</div>
							</div>
						</div>
						<div class="accordion-item">
							<div class="accordion-header card card-default" id="headingTwo">								
								<div class="card-header accordion-button" data-bs-toggle="collapse" data-bs-parent="#accordion" data-bs-target="#collapse2" aria-expanded="false" aria-controls="collapse2">
									<svg data-src="svg/light_source_matrix_layout.svg" width="18" height="18" fill="currentColor" class="svg4hyperhdr"></svg><span data-i18n="conf_leds_layout_matrix">Matrix Configuration (LED wall)</span>
								</div>
							</div>
							<div id="collapse2" class="accordion-collapse card collapse" aria-labelledby="headingTwo" data-bs-parent="#accordion">
								<div class="card-body">
									<div class="container">										
										<div class="row form-group">
											<div class="col-4 col-form-label mb-3">
												<label class="ltdlabel" for="ip_ma_ledshoriz" data-i18n="conf_leds_layout_ma_horiz">Horizontal</label>
											</div>
											<div class="col-8">
												<div class="input-group">
													<input class="form-control ledMAconstr" id="ip_ma_ledshoriz" type="number" value="1" min="1" step="1" />
													<div class="input-group-append">
														<span data-i18n="edt_append_leds" class="input-group-text">LEDs</span>
													</div>
													<div class="input-group-append">
														<button type="button" class="btn btn-secondary stepper-down">-</button>
													</div>
													<div class="input-group-append">
														<button type="button" class="btn btn-secondary stepper-up">+</button>
													</div>
												</div>
											</div>
										</div>
										<div class="row form-group">
											<div class="col-4 col-form-label mb-3">
												<label class="ltdlabel" for="ip_ma_ledsvert" data-i18n="conf_leds_layout_ma_vert">Vertical</label>
											</div>
											<div class="col-8">
												<div class="input-group">
													<input class="form-control ledMAconstr" id="ip_ma_ledsvert" type="number" value="1" min="1" step="1" />
													<div class="input-group-append">
														<span data-i18n="edt_append_leds" class="input-group-text">LEDs</span>
													</div>
													<div class="input-group-append">
														<button type="button" class="btn btn-secondary stepper-down">-</button>
													</div>
													<div class="input-group-append">
														<button type="button" class="btn btn-secondary stepper-up">+</button>
													</div>
												</div>
											</div>
										</div>
										<div class="row form-group">
											<div class="col-4 col-form-label mb-3">
												<label class="ltdlabel" for="ip_ma_cabling" data-i18n="conf_leds_layout_ma_cabling">Cabling</label>
											</div>
											<div class="col-8">
												<select class="form-select ledMAconstr" id="ip_ma_cabling">
													<option value="snake" data-i18n="conf_leds_layout_ma_optsnake">Snake</option>
													<option value="parallel" data-i18n="conf_leds_layout_ma_optparallel">Parallel</option>
												</select>
											</div>
										</div>
										<div class="row form-group">
											<div class="col-4 col-form-label mb-3">
												<label class="ltdlabel" for="ip_ma_start" data-i18n="conf_leds_layout_ma_position">Input</label>
											</div>
											<div class="col-8">
												<select class="form-select ledMAconstr" id="ip_ma_start">
													<option value="top-left" data-i18n="conf_leds_layout_ma_opttopleft">Top left</option>
													<option value="top-right" data-i18n="conf_leds_layout_ma_opttopright">Top right</option>
													<option value="bottom-left" data-i18n="conf_leds_layout_ma_optbottomleft">Bottom left</option>
													<option value="bottom-right" data-i18n="conf_leds_layout_ma_optbottomright">Bottom right</option>
												</select>
											</div>
										</div>										
									</div>
								</div>
								<div class="card-footer" style="text-align: right;">
									<button id="btn_ma_save" class="btn btn-primary"><svg data-src="svg/button_save.svg" fill="currentColor" class="svg4hyperhdr"></svg><span data-i18n="conf_leds_layout_button_savelay">Save layout</span></button>
								</div>
							</div>
						</div>
						<div id="texfield_panel" class="accordion-item">
							<div class="accordion-header card card-default" id="headingThree">								
								<div class="card-header accordion-button" data-bs-toggle="collapse" data-bs-parent="#accordion" data-bs-target="#collapse4" aria-expanded="false" aria-controls="collapse4">
									<svg data-src="svg/general_settings.svg" width="18" height="18" fill="currentColor" class="svg4hyperhdr"></svg><span data-i18n="conf_leds_layout_generatedconf">Generated/Actual LED Configuration</span>
								</div>
							</div>							
							<div id="collapse4" class="accordion-collapse collapse"  aria-labelledby="headingThree" data-bs-parent="#accordion">
								<div class="card-body">
									<p id="leds_wl" data-i18n="conf_leds_layout_textf1">
										This textfield shows by default your current loaded layout and will be overwritten if you generate a new one above. Optional you could perform further edits.
									</p>
									<div id="aceedit" style="width: 100%; height: 500px;"></div>
								</div>
								<div class="card-footer">
									<button type="button" class="btn btn-warning" id="leds_custom_updsim"><svg data-src="svg/button_reload.svg" fill="currentColor" class="svg4hyperhdr top-0"></svg><span data-i18n="conf_leds_layout_button_updsim">Update preview</span></button>
									<button type="button" class="btn btn-primary pull-right" id="leds_custom_save"><svg data-src="svg/button_save.svg" fill="currentColor" class="svg4hyperhdr"></svg><span data-i18n="conf_leds_layout_button_savelay">Save layout</span></button>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- accordion -->
				<div class="col-lg-6 col-md-12" id="led_zoom_panel">
					<div class="card card-default">
						<div class="card-header" id="instTarget2">
							<h4 class="card-title"><svg data-src="svg/live_preview.svg" width="18" height="18" fill="currentColor" class="svg4hyperhdr"></svg><span data-i18n="conf_leds_layout_peview">LED Layout preview</span></h4>
						</div>
						<div class="card-body" id="visualCreatorPanel">
							<p id="previewledcount" style="font-weight: bold;"></p>
							<p id="previewledpower" style="font-weight: bold;"></p>
							<div id="led_vis_help"></div>
							<p data-i18n="conf_leds_layout_context" style="font-weight: bold;"></p>
							<div class="col-lg-12 st_helper" style="padding-left: 0px; padding-right: 0px;">
								<div id="leds_preview"></div>
							</div>
						</div>
						<div class="card-footer">
							<button type="button" class="btn btn-danger" id="leds_prev_toggle_num"><svg data-src="svg/light_source_show_numbers.svg" fill="currentColor" class="svg4hyperhdr"></svg><span data-i18n="main_ledsim_btn_togglelednumber">toggle led numbers</span></button>
							<button type="button" class="btn btn-primary" id="leds_prev_checklist"><svg data-src="svg/button_help.svg" fill="currentColor" class="svg4hyperhdr"></svg><span data-i18n="conf_leds_layout_btn_checklist">toggle led numbers</span></button>
							<button type="button" class="btn btn-warning" id="leds_prev_zoom"><svg id="cmd_zoom_in_icon" data-src="svg/button_zoom.svg" fill="currentColor" class="svg4hyperhdr"></svg><svg id="cmd_zoom_out_icon" data-src="svg/button_zoom_out.svg" fill="currentColor" class="svg4hyperhdr d-none"></svg><span data-i18n="conf_leds_layout_btn_zoom">zoom</span></button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<div class="dropdown-menu dropdown-menu-sm" style="display: none;" id="creator-context-menu">
	<a class="dropdown-item" href="#" id="CMD_MOVE"><svg data-src="svg/button_move.svg" fill="currentColor" class="svg4hyperhdr"></svg><span data-i18n="led_editor_context_move">Move</span></a>
	<a class="dropdown-item" href="#" id="CMD_PROPERTIES"><svg data-src="svg/button_edit_details.svg" fill="currentColor" class="svg4hyperhdr"></svg><span data-i18n="led_editor_context_properties">Properties</span></a>
	<a class="dropdown-item" href="#" id="CMD_IDENTIFY"><svg data-src="svg/button_identify.svg" fill="currentColor" class="svg4hyperhdr"></svg><span data-i18n="led_editor_context_identify">Identify</span></a>
	<a class="dropdown-item" href="#" id="CMD_ENABLE"><svg id="cmd_led_disable_icon" data-src="svg/button_switched_off.svg" fill="currentColor" class="svg4hyperhdr"></svg><svg id="cmd_led_enable_icon" data-src="svg/button_switched_on.svg" fill="currentColor" class="svg4hyperhdr d-none"></svg><span id="cmd_dis_enable_text" data-i18n="led_editor_context_enable">Enable</span></a>
	<a class="dropdown-item" href="#" id="CMD_DELETE"><svg data-src="svg/button_delete.svg" fill="currentColor" class="svg4hyperhdr"></svg><span data-i18n="led_editor_context_delete">Delete</span></a>
</div>
<!-- Modal -->
<div class="modal fade" id="ledPropertiesForm" tabindex="-1" aria-labelledby="ledPropertiesLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content p-0">
			<div class="card card-default modal-body" style="margin: 0px !important; padding: 0px !important;">
				<div class="card-header">
					<h4 class="modal-title"><b><span id="ledPropertiesFormLabel"></span></b></h4>				
				</div>
				<div class="card-body">
					<div class="container">
						<div class="form-group row">
							<div class="col-12 col-md-6">
								<div class="form-group row">
									<div class="col-form-label mb-3 col-3">
										<label class="required" data-i18n="conf_leds_layout_cl_left"></label>
									</div>
									<div class="mb-3 col-9">
										<div class="input-group">
											<input type="number" class="form-control" data-schemaformat="stepper" min="0" max="1" step="0.001" id="ledPropertiesDialogLeft" />
											<div class="input-group-append"><button type="button" class="btn btn-secondary stepper-down">-</button></div>
											<div class="input-group-append"><button type="button" class="btn btn-secondary stepper-up">+</button></div>
										</div>
									</div>
								</div>
								<div class="form-group row">
									<div class="col-form-label mb-3 col-3">
										<label class="required" data-i18n="conf_leds_layout_cl_top"></label>
									</div>
									<div class="mb-3 col-9">
										<div class="input-group">
											<input type="number" class="form-control" data-schemaformat="stepper" min="0" max="1" step="0.001" id="ledPropertiesDialogTop" />
											<div class="input-group-append"><button type="button" class="btn btn-secondary stepper-down">-</button></div>
											<div class="input-group-append"><button type="button" class="btn btn-secondary stepper-up">+</button></div>
										</div>
									</div>
								</div>
							</div>
							<div class="col-12 col-md-6">								
								<div class="form-group row">
									<div class="col-form-label mb-3 col-3">
										<label class="required" data-i18n="conf_leds_layout_cl_right"></label>
									</div>
									<div class="mb-3 col-9">
										<div class="input-group">
											<input type="number" class="form-control" data-schemaformat="stepper" min="0" max="1" step="0.001" id="ledPropertiesDialogRight" />
											<div class="input-group-append"><button type="button" class="btn btn-secondary stepper-down">-</button></div>
											<div class="input-group-append"><button type="button" class="btn btn-secondary stepper-up">+</button></div>
										</div>
									</div>
								</div>
								<div class="form-group row">
									<div class="col-form-label mb-3 col-3">
										<label class="required" data-i18n="conf_leds_layout_cl_bottom"></label>
									</div>
									<div class="mb-3 col-9">
										<div class="input-group">
											<input type="number" class="form-control" data-schemaformat="stepper" min="0" max="1" step="0.001" id="ledPropertiesDialogBottom" />
											<div class="input-group-append"><button type="button" class="btn btn-secondary stepper-down">-</button></div>
											<div class="input-group-append"><button type="button" class="btn btn-secondary stepper-up">+</button></div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="card-footer">					
					<button type="button" id="ready_to_set_single_abort" class="btn btn-danger float-end"><span data-i18n="general_btn_exit">Exit</span></button>					
					<button type="button" id="ready_to_set_single_led" class="btn btn-primary float-end me-2"><span data-i18n="general_btn_save">Save</span></button>
				</div>				
			</div>
		</div>
	</div>
</div>
<link href="css/jsonaceeditor.min.css" rel="stylesheet" type="text/css" />
<script>

$.getScript('js/LedSetups/SetupCommon.js').then(() => {
	const setupScripts = [
		'js/LedSetups/SetupPhilipsHue.js',
		'js/LedSetups/SetupZigbee2mqtt.js',
		'js/LedSetups/SetupHomeAssistant.js',
		'js/LedSetups/SetupAtmoorb.js',
		'js/LedSetups/SetupYeelight.js',
		'js/LedSetups/SetupCololight.js',
		'js/LedSetups/SetupLifx.js',
		'js/lib/jsonaceeditor.min.js'
	].map(src => $.getScript(src));

	$.when(...setupScripts).then(() => {
		$.getScript('/js/light_source.js');
	});
});

</script>
